<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul li {
				color: pink;
				/* 后代选择器可以使任意基础选择器的组合, */
				/* 他们之间要用空格隔开 */
				/* 后代元素选择器可以一级一级一直往下找 */
			}

			ul li a {
				color: green;
			}

			.a li a {
				color: blue;
			}

			.b a {
				color: purple
			}
			.b>a {
				color: #9370DB;
			}
			/* 区别子元素和后代元素，子元素选择器只会选择亲儿子一级的，而后代会选择所有符合的后代元素 */
		</style>
	</head>
	<body>
		<p> 复合选择器有 后代选择器 子选择器 伪类选择器 并集选择器等</p>
		<h4>后代选择器</h4>
		<ul>
			<li>我是ul的孩纸</li>
			<li>我是ul的孩纸</li>
			<li>我是ul的孩纸</li>
			<li>我是ul的孩纸<a href="">ul里面的超链接</a></li>
		</ul>
		<ol>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
		</ol>
		<ul class="a">
			<li>我是ul的孩纸</li>
			<li>我是ul的孩纸</li>
			<li>我是ul的孩纸</li>
			<li>我是ul的孩纸<a href="">ul里面的超链接</a></li>
		</ul>
		<div class="b">
			<a href="">我是亲儿子，子元素选择</a>
			<p>
				<a href="">我是孙子，后代元素选择</a>
			</p>
		</div>
	</body>
</html>
